<template>
  <div>
    <SelfTitle :userName="username"></SelfTitle>
    <div class="manageContent">
      <!-- 搜索头部-->
      <div class="manageSearch">
        <el-input placeholder="请输入内容" class="mobelSeachInput"></el-input>
        <div class="box" style="background: white">
          <el-select
            v-model="projectStatus"
            placeholder="请选择状态"
            @change="changeStatus"
          >
            <el-option label="已完成" value="1"> </el-option>
            <el-option label="未完成" value="0"> </el-option>
            <el-option label="全状态" value="10"> </el-option>
          </el-select>
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="timeProject"
            @change="timeChange"
          ></el-date-picker>
        </div>
        <el-button class="reqSearchBtn" @click="searchProject">搜索</el-button>
        <el-button class="reqCancleBtn" @click="cancelSearchProject"
          >取消</el-button
        >
        <el-button v-if="isMySubject" @click="resProjectAll"
          >我的项目</el-button
        >
        <el-button v-else @click="resMyProject">所有项目</el-button>
        <el-button @click="seeUser">查看用户</el-button>
      </div>
      <!-- 项目表格 -->
      <div class="tableBox">
        <el-table
          border
          :data="allShowInfo"
          style="width: 100%"
          :header-cell-style="{
            background: '#E9E9E9',
            color: '#606266',
            fontWeight: 600,
          }"
        >
          <el-table-column label="序号" width="50" type="index" align="center">
          </el-table-column>
          <el-table-column
            label="项目名称"
            width="100"
            align="center"
            prop="projectName"
          ></el-table-column>
           <el-table-column
            label="关联需求"
            width="100"
            align="center"
            prop="demandName"
          ></el-table-column>
          <el-table-column
            prop="demandDescribe"
            label="需求描述"
            align="center"
          >
            <template slot-scope="scope">
              <div class="reqDesc">{{ scope.row.demandDescribe }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="categoryName"
            label="需求分类"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="docFilesUrl"
            label="项目附件"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <a :href="scope.row.docFilesUrl" class="textUpload">点击下载</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="所属企业"
            width="120"
            align="center"
            prop="industry"
          >
          </el-table-column>
          <el-table-column
            prop="gmtCreated"
            label="创建时间"
            align="center"
            width="160"
          >
          </el-table-column>
          <el-table-column
            label="联系方式"
            width="100"
            align="center"
            prop="contact"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="操作"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <!-- <div v-if="scope.row.status">已完成</div>
                <div v-else>未完成</div> -->
                <el-button
                  size="mini"
                  @click="changeProjectStatus(scope.row.projectId, 0)"
                  type="text"
                  v-if="scope.row.status === 1"
                  >已完成</el-button
                >
                <el-button
                  size="mini"
                  @click="changeProjectStatus(scope.row.projectId, 1)"
                  type="text"
                  v-else
                  >未完成</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 手机端展示 -->
      <div class="tableBoxMobel">
        <ul>
          <li
            v-for="(item, index) in allShowInfo"
            :key="index"
            @click="enterProjectMobel(item)"
          >
            <span>{{ item.projectName }}</span>
            <span>{{ item.status === 1 ? "已完成" : "未完成" }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import {  ReqlistByStatusAndDate,ReqchangeProjectStatus } from "../../../request/index";
import SelfTitle from "@/components/SelfTitle.vue";
import dayjs from "dayjs";
export default {
  components: {
    SelfTitle,
  },
  data() {
    return {
      projectStatus: "", //项目状态
      timeProject: "", //项目创建时间
      allShowInfo: [],
      isMySubject: false,
      userType: "",
      username: "",
    };
  },
  methods: {
    // 进入手机详情
    enterProjectMobel(row) {
      this.$router.push({
        path: "/self/manage/projectDetail",
        query: {
          info: row,
        },
      });
      console.log(row);
    },
    // 改变状态
    changeStatus(value) {
      this.projectStatus = value;
    },
    // 获取时间
    timeChange(value) {
      this.timeProject = new Date(value).getTime();
      this.timeProject = dayjs(this.timeDemand).format("YYYY-MM-DD");
    },
    // 获取所有项目
    async resProjectAll() {
      this.isMySubject = !this.isMySubject;
      let res = await ReqlistByStatusAndDate();
      this.allShowInfo = res.projectVo;
    },
    // 获取我的项目
    async resMyProject() {
      this.isMySubject = !this.isMySubject;
      let id = sessionStorage.getItem("id");
      let data = {
        id,
      };
      let res = await ReqlistByStatusAndDate(data);
      this.allShowInfo = res.projectVo;
    },
    // 搜索项目
    async searchProject() {
      let requestData = {
        date: this.timeProject,
        status: this.projectStatus,
        id: sessionStorage.getItem("id"),
      };
      if (!this.isMySubject) {
        delete requestData.id;
      }
      if (!this.timeProject) {
        delete requestData.timeProject;
      }
      if (this.projectStatus !== 0 || this.projectStatus !== 1) {
        delete requestData.projectStatus;
      }
      let res = await ReqlistByStatusAndDate(requestData);
      const { projectVo } = res;
      this.allShowInfo = projectVo;
    },
    // 取消搜索
    async cancelSearchProject() {
      this.timeProject = "";
      this.projectStatus = "";
      let res = await ReqlistByStatusAndDate();
      this.allShowInfo = res.projectVo;
      this.isMySubject = false;
    },
    // 返回到查看用户
    seeUser() {
      this.$router.history.push("/self/manage/ManUser");
    },
     // 修改项目状态
    async changeProjectStatus(id, status) {
      let formdata = new FormData;
      formdata.append('id',id);
      formdata.append('status',status)
      let result = await ReqchangeProjectStatus(formdata);
      const { msg } = result;
      if (msg === "success") {
        this.$message({
          message: "修改项目状态成功",
          type: "success",
        });
      }
      if(this.isMySubject){
        await this.resMyProject();
      }else{
        await this.resProjectAll()
      }
    },
  },
  created() {
    this.userType = sessionStorage.getItem("userType");
    this.username = this.userType == 13 ? "超级管理用户" : "管理用户";
    this.resMyProject();
  },
};
</script>
<style scoped>
@import url("~@/assets/styles/manage/reqAll.css");
</style>
